<template>
    <div class="modal" :class="params.choose ? 'chooseModal': '' ">
        <p>{{ params.pointcoupon }}点券</p>
        <p>¥{{ params.money }}</p>
    </div>
</template>

<script>
export default {
    name:'pointCoupon',
    props:['params'],
}
</script>

<style lang="scss" scoped>
    .modal{
        width:134px;
        height:68px;
        margin:0 15px 32px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(211, 217, 223, 1);
        border-radius:6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        user-select:none;
        cursor: pointer;

        & > p:first-child{
            font-size:16px;
            font-weight:400;
            color:rgba(243,101,57,1);
        }

        & > p:last-of-type{
            font-size:12px;
            font-weight:400;
            color:rgba(185,191,197,1);
        }
    }
    .chooseModal{
        border:1px solid rgba(243, 101, 57, 1);
        position: relative;
        &::before{
            content: "";
            position: absolute;
            z-index: 9;
            width: 8px;
            height: 5px;
            border: 2px solid white;
            border-top: none;
            border-right: none;
            transform: rotate(-55deg);
            bottom: 4px;
            right: 2px;
        }
        &::after{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 18px solid rgba(243, 101, 57, 1);
            border-left: 18px solid transparent;
            bottom:0;
            right: 0;
        }
    }
</style>
